<template>
	<div class="footer">
		<router-link to="/home" tag="div" class="item">
			<div class="icon"><van-icon name="wap-home" size="34"/></div>
			首页
		</router-link> 
		<router-link to="/list"  tag="div" class="item">
			<div class="icon iconfont icon-fenlei"></div>
			分类
		</router-link> 
		<router-link to="/cart"  tag="div" class="item">
			<div class="icon iconfont icon-gouwucheman">
				<sup class="num">{{this.$store.getters.goodsCount}}</sup>
			</div>
			购物车
		</router-link>
		<router-link to="/my"  tag="div" class="item">
			<div class="icon iconfont icon-user"></div>
			我的
		</router-link>
	</div>
</template>

<script>
export default {
  name: 'Footer',
  data(){
	  return{
		  
	  }
  },
  created(){
	this.$store.dispatch("asyncgetCartList");
  },
}
</script>

<style  lang='less' scoped>
	@import "../assets/icon.less";
	.footer{
		position: fixed;
		left:0;
		bottom:0;
		height:50px;
		width:100%;
		background-color: #fff;
		box-shadow: 0px 0px 8px 7px #ccc;
		display: flex;
		align-items: center;
		.item{
			flex:1;
			text-align: center;
			font-size:13px;
		}
		.iconfont{
			font-size:30px;
			.num{
				padding-left:5px;
				font-size:16px;
			}
		}
	}
	.router-link-active{
		color:#1BAEAE;
	}
</style>